
<template>
  <div>
    <van-nav-bar
      title="水果"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />


    <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>

   <div class="c1">
        <dl>
            <dt>
                <img src="../../assets/sg1.png" />
            </dt>
            <dd>
                <p>杏 杏果，甜梅，叭达杏，杏实，杏子</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c2">
        <dl>
            <dt>
                <img src="../../assets/sg2.png" />
            </dt>
            <dd>
                <p>红枣 大枣</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c3">
        <dl>
            <dt>
                <img src="../../assets/sg3.png" />
            </dt>
            <dd>
                <p>西瓜 夏瓜，寒瓜，青门绿玉房</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c4">
        <dl>
            <dt>
                <img src="../../assets/sg4.png" />
            </dt>
            <dd>
                <p>荔枝 丹荔，丽枝，香果，勒荔，鲜...</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c5">
        <dl>
            <dt>
                <img src="../../assets/sg5.png" />
            </dt>
            <dd>
                <p>椰子 蛋椰，肯余，越子头，椰僳，疍耶，....</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c6">
        <dl>
            <dt>
                <img src="../../assets/sg6.png" />
            </dt>
            <dd>
                <p>苹果 滔婆，频婆，奈子，平波，奈，超丸...</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c7">
        <dl>
            <dt>
                <img src="../../assets/sg7.png" />
            </dt>
            <dd>
                <p>香蕉 蕉子，蕉果，甘蕉</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c8">
        <dl>
            <dt>
                <img src="../../assets/sg8.png" />
            </dt>
            <dd>
                <p>柠檬 拧果，洋柠檬，益母果，黎檬</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c9">
        <dl>
            <dt>
                <img src="../../assets/sg9.png" />
            </dt>
            <dd>
                <p>柚子 文旦。香抛，霜柚，臭橙</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    </div>
</template>

<script setup lang='ts'>

import { ref } from 'vue'
 const value = ref('');


const onClickLeft = () => history.back()

</script>

<style lang="scss" scoped>

.c1{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c2{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c3{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c4{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c5{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c6{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c7{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c8{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c9{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
</style>